<template>
  <div class="nihao">
    <div class="fnahui">
      <div @click="jup">返回</div>
      <div>购物清单</div>
      <div @click="shanchu" v-if="lps">编辑</div>
      <div @click="shanchu" v-if="!lps">完成</div>
    </div>
    <div class="xik">
      <div class="xiok" v-for="(item, index) in arr1" :key="index">
        <div class="xiaoq1">
          <input
            type="checkbox"
            class="dfop1"
            :checked="item.done"
            @change="shoudong(item.id)"
          />
        </div>
        <div class="hong">
          <img :src="item.img" />
        </div>
        <div class="jiana">
          <div>{{ item.name }}</div>
          <div><span>￥</span>{{ item.price }}</div>
          <div>库存{{ item.stock }}件</div>
        </div>
        <div class="jiajian">
          <div @click="jia(index)" class="jia1">+</div>
          <div>{{ item.shu }}</div>
          <div @click="jian(index)" class="jian1">-</div>
        </div>
      </div>
    </div>
    <div class="didna">
      <div>
        <div class="dan1">
          <input type="checkbox" class="dfop" v-model="lps1" />
          <span>全选</span>
        </div>
        <div class="heji" v-if="lps">
          <span>合计：</span>
          <span
            >￥ <span>{{ qianhe }}</span></span
          >
        </div>
        <div class="jiesu">
          <span class="lpos">去结算</span
          ><span
            >(<span>{{ shanyi }}</span
            >)</span
          >
          <div class="jiesu1" v-if="!lps" @click="shanchu1()">
            <span class="lpos">删除</span
            ><span
              >(<span>{{ shanyi }}</span
              >)</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "Gou",
  data() {
    return {
      lps: true,
    };
  },
  computed: {
    ...mapState(["arr1"]),
    ...mapGetters(["qianhe", "shanyi"]),
    lps1: {
      get() {
        return this.arr1.filter((item) => item.done).length == this.arr1.length &&this.arr1.length!=0;
      },
      set(value) {
        console.log(value);
        this.arr1.map(item=>item.done=value)
      },
    },
  },
  methods: {
    ...mapMutations(["shanchu1", "jia", "jian"]),
    // 跳转页面
    jup() {
      this.$router.push("/");
    },
    // 点击编辑
    shanchu() {
      this.lps = !this.lps;
    },
    // 点击删除
    shanchu1() {
      this.$store.commit("shanchu1");
      this.lps = true;
    },
    // 点击checkbox
    shoudong(id) {
      this.arr1.map(item=>{
        if(item.id==id){
          item.done=!item.done
        }
      })
      localStorage.setItem("op1", JSON.stringify(this.arr1));
    },
  },
};
</script>

<style scoped>
.jiesu1 {
  width: 1.2rem;
  height: 0.53rem;
  line-height: 0.53rem;
  background: #7a45e5;
  float: right;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
}
.nihao {
  width: 100%;
  height: 100vh;
  position: absolute;
}
.jiesu1 > span {
  font-size: 0.13rem;
  color: white;
}
.jiana > div:nth-child(1) {
  width: 1.8rem;
  height: 0.38rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 0.18rem;
  -webkit-box-orient: vertical;
  margin-top: 0.03rem;
  font-size: 0.13rem;
}
.jiana > div:nth-child(2) {
  margin-top: 0.03rem;
  font-size: 0.14rem;
  color: #7a46e5;
}
.jiana > div:nth-child(3) {
  margin-top: 0.02rem;
  font-size: 0.12rem;
  color: #888888;
}
.xiaoq1 {
  width: 0.44rem;
  height: 0.76rem;
  /* background: palevioletred; */
  float: left;
  margin-left: 3%;
  text-align: center;
}
.jiajian > div:nth-child(1) {
  /* margin-top: 10px;
  margin-left: 0.65rem; */
}
.jiajian > div:nth-child(2) {
  margin-top: 0.1rem;
  /* margin-left: 0.65rem; */
}
.jiajian > div:nth-child(3) {
  margin-top: 0.1rem;
  /* margin-left: 0.65rem; */
}
.jiajian {
  width: 8%;
  height: 100%;
  float: right;
  /* background: salmon; */
  float: right;
  color: #999999;
}
.jiana {
  width: 48%;
  margin-left: 5%;
  height: 100%;
  /* background: darkgoldenrod; */
  float: left;
}
.hong {
  width: 0.59rem;
  height: 0.76rem;
  margin-right: 0.15rem;
  /* background: darkcyan; */
  float: left;
}
.hong > img {
  width: 100%;
  height: 0.58rem;
}
.xiok {
  /* width: 100%; */
  height: 0.76rem;
  padding: 0.1rem 0.06rem;
  background: white;
  margin-top: 0.1rem;
}
.fnahui {
  width: 100%;
  height: 0.45rem;
  font-size: 0.15rem;
  background: white;
}
.fnahui .fnahui > div:nth-child(1) {
  float: left;
  margin-left: 0.1rem;
}
.fnahui > div:nth-child(3) {
  float: right;
  margin-right: 0.1rem;
}
.fnahui > div:nth-child(2) {
  float: left;
  margin-left: 1.2rem;
}
.fnahui > div {
  float: left;
  line-height: 0.45rem;
  color: #2c3e50;
  margin-left: 0.1rem;
}
.dan1 > span {
  font-size: 0.13rem;
  float: left;
  margin-left: 0.1rem;
}

.heji > span {
  font-size: 0.14rem;
  float: left;
  /* padding: 0px .933333rem; */
}
.xik {
  width: 100%;
  margin-bottom: 3.8333rem;
}
.didna {
  width: 100%;
  height: 0.53rem;
  background: #ffffff;
  position: fixed;
  bottom: 0px;
}
.dan1 {
  width: 0.7rem;
  height: 0.53rem;
  float: left;
  line-height: 0.53rem;
  /* background: pink; */
}
.heji {
  width: 1rem;
  height: 0.53rem;
  line-height: 0.53rem;
  /* background: darkblue; */
  float: left;
  margin-left: 0.8rem;
}
.jiesu {
  width: 1.2rem;
  height: 0.53rem;
  line-height: 0.53rem;
  background: #7a45e5;
  float: right;
  text-align: center;
  position: relative;
}
.jiesu > span {
  font-size: 0.13rem;
  color: white;
}
.dfop:checked {
  background: #1673ff;
}
.dfop {
  float: left;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border: solid 1px #dddddd;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-transition: background-color ease 0.1s;
  transition: background-color ease 0.1s;
  outline: none;
  margin-top: 0.16rem;
  margin-left: 0.13rem;
}
.dfop:checked::after {
  content: "";
  top: 4px;
  left: 3px;
  position: absolute;
  background: transparent;
  border: #fff solid 2px;
  border-top: none;
  border-right: none;
  height: 6px;
  width: 10px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.dfop1:checked {
  background: #1673ff;
}
.dfop1 {
  float: left;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border: solid 1px #dddddd;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-transition: background-color ease 0.1s;
  transition: background-color ease 0.1s;
  outline: none;
  margin-top: 0.3rem;
  margin-left: 0px;
}
.dfop1:checked::after {
  content: "";
  top: 4px;
  left: 3px;
  position: absolute;
  background: transparent;
  border: #fff solid 2px;
  border-top: none;
  border-right: none;
  height: 6px;
  width: 10px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
</style>
